<template>
  <div class="addOrEditCirleFriend">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <i class="el-icon-back"></i>群邀请管理
      </div>
    </div>
    <div class="content-big">
      <div class="content-main">
          <ul class="tablist">
              <li class="active">设置</li>
              <li>生效群</li>
          </ul>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="140px"
          label-position="left"
        >
          <div class="content-item">
            <el-form-item label="客户群：" prop="basicInfo.taskName">
                <el-radio-group v-model="form.basicInfo.taskName">
                    <el-radio :label="item.value" v-for="(item,index) in typeList" :key="index">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>

          </div>
            <div class="Group-big">
            <div class="item-title">群名称：</div>
            <el-form-item prop="userName2" class="item-big">
                <el-select
                        v-model="form.basicInfo.taskName"
                        placeholder="请选择群类型"
                        class="select-left"
                        size="small"
                >
                    <el-option
                            v-for="item in groupList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
                <el-input placeholder="可输入多个，按enter确认" v-model="input3"   size="small"  class="select-right" @keyup.enter.native="handleQuery">
                    <el-button slot="append" icon="el-icon-plus"></el-button>
                </el-input>
            </el-form-item>
            <div class="item-title">标签：</div>
            <el-form-item prop="userName2" class="item-big">
                <el-select
                        v-model="form.basicInfo.taskName"
                        placeholder="请选择所有标签"
                        size="small"
                        class="select-left"
                >
                    <el-option
                            v-for="item in labelList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
                <multipleSelect size="small" placeholder='企微标签'  class="select-right" :receiverNameOpt='lableOpt'></multipleSelect>
            </el-form-item>
                <div class="item-title">标签：</div>
            <el-form-item prop="userName5" class="item-big">
                <el-button class="select-left"   size="small">是否是群主/管理</el-button>
                <el-select
                        v-model="form.basicInfo.taskName"
                        placeholder="请选择所有标签"
                        size="small"
                        class="select-right"
                >
                    <el-option
                            v-for="item in groupMgtList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="item-big">
                <el-button  class="select-left"   size="small">成员数</el-button>
                <el-select
                        v-model="form.basicInfo.taskName"
                        placeholder="请选择所有标签"
                        class="select-right"
                        size="small"
                >
                    <el-input v-model="form.basicInfo.taskName"   size="small" placeholder="请输入内容"></el-input>
                    <el-input v-model="form.basicInfo.taskName"   size="small" placeholder="请输入内容"></el-input>
                    <option></option>
                    <el-button>确定</el-button>
                </el-select>
            </el-form-item>
                <div class="seting">
                    <div class="seting-left">设置排除条件
                        <el-switch v-model="value" active-color="#13ce66"></el-switch>
                    </div>
                    <span class="seting-right">开启后将排除满足以下条件客户群</span>
                </div>
                <div class="item-title">群名称：</div>
                <el-form-item prop="userName2" class="item-big">
                    <el-select
                            v-model="form.basicInfo.taskName"
                            placeholder="请选择群类型"
                            class="select-left"
                            size="small"
                    >
                        <el-option
                                v-for="item in groupList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <el-input placeholder="可输入多个，按enter确认" v-model="input3"   size="small"  class="select-right" @keyup.enter.native="handleQuery">
                        <el-button slot="append" icon="el-icon-plus"></el-button>
                    </el-input>
                </el-form-item>
                <div class="item-title">标签：</div>
                <el-form-item prop="userName2" class="item-big">
                    <el-select
                            v-model="form.basicInfo.taskName"
                            placeholder="请选择所有标签"
                            size="small"
                            class="select-left"
                    >
                        <el-option
                                v-for="item in labelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <multipleSelect size="small" placeholder='企微标签'  class="select-right" :receiverNameOpt='lableOpt'></multipleSelect>
                </el-form-item>
                <div class="item-title">标签：</div>
                <el-form-item prop="userName5" class="item-big">
                    <el-button class="select-left"   size="small">是否是群主/管理</el-button>
                    <el-select
                            v-model="form.basicInfo.taskName"
                            placeholder="请选择所有标签"
                            size="small"
                            class="select-right"
                    >
                        <el-option
                                v-for="item in groupMgtList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="item-big">
                    <el-button  class="select-left"   size="small">成员数</el-button>
                    <el-select
                            v-model="form.basicInfo.taskName"
                            placeholder="请选择所有标签"
                            class="select-right"
                            size="small"
                    >
                        <el-input v-model="form.basicInfo.taskName"   size="small" placeholder="请输入内容"></el-input>
                        <el-input v-model="form.basicInfo.taskName"   size="small" placeholder="请输入内容"></el-input>
                        <option></option>
                        <el-button>确定</el-button>
                    </el-select>
                </el-form-item>
                <div class="seting-big"><el-checkbox v-model="checked"></el-checkbox>符合条件新群自动加入（建群5分钟时判断是否符合）</div>
            </div>
            <el-form-item label="群人数上限：" prop="userName5">
                <el-input v-model="value" size="small" placeholder="请输入内容" style="width: 100px; margin-right: 10px; "></el-input>人
                <div class="group-tips">已选择和自动新建的客户群，群成员达到设置值，自动递补拉入下一个群</div>
            </el-form-item>
            <el-form-item label="自动新建客户群：" prop="userName5">
                <div class="sexing">
                    <el-switch v-model="value" active-color="#13ce66"></el-switch>开启后，群不够自动新建
                </div>

            </el-form-item>
<!--            开启群后的判断逻辑-->
            <el-form-item label="群名称：" prop="userName5">
                <div class="flex-big">
                    <el-input v-model="value" placeholder="请输入内容" size="small" style="width:200px; margin-right: 10px"></el-input>群自动编号，从 <el-input v-model="value" placeholder="请输入内容" style="width:100px; margin-left: 10px"></el-input>
                    开始
                </div>
                <div class="group-tips">举例：群名称“团购群”，编号从3开始。则新建群的名称为“团购群3”“团购群4”“团购群5”……</div>

            </el-form-item>
            <el-form-item label="新群固定成员：" prop="userName5">
                <el-button type="info" plain disabled><i class="el-icon-plus"></i>选择客户</el-button>
                <el-button type="info" plain disabled><i class="el-icon-plus"></i>选择企业成员</el-button>
            </el-form-item>
            <el-form-item label="已满群递补方式：" prop="userName5">
                <el-radio-group v-model="form.basicInfo.taskName">
                    <el-radio :label="item.value" v-for="(item,index) in typeList" :key="index">{{item.label}}
<!--                        不递补提示-->
                        <el-tooltip class="item" effect="dark" content="已达设置上限的客户群，有人退群后不重新进入递补群。" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        <!--                        递补提示-->
                        <el-tooltip class="item" effect="dark" content="已达设置上限的客户群，有人退群后重新进入递补群，默认排序递补群中最后一个。" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer-btn">
      <el-button @click="handleCloseDialog">保存方案</el-button>
      <el-button type="primary" @click="onSubmit('form')">并返回方案设置</el-button>
    </div>
  </div>
</template>

<script>
// 引入样式
import VideoUpload from "@/components/VideoUpload/index";
import MultipleSelect from "@/components/MultipleSelect/index.vue";

export default {
  name: 'GroupInvitationMgt',
  components: {
      MultipleSelect,
    VideoUpload,
  },
  data() {
    return {
      showViewConditions:false,
      showReplyLink: false,
      showSelectByUser: false,
      active: 0,
      input3: null,
      type: 0,
      timeData: null,//发布日期
      dataTime:null,
        labelList:[
            //称呼
            {value: 1, label: "含任意标签"},
            {value: 2, label: "含所有标签"},
            {value: 3, label: "未打任何标签"},
        ],
        groupMgtList:[
            {value: 1, label: "群主/群管理员"},
            {value: 2, label: "群主"},
            {value: 3, label: "群成员"},
        ],
        groupList: [
            //群查找
            {value: 1, label: "含任意关键词"},
            {value: 2, label: "含所有关键词"},
        ],
        methodList: [
            //群查找
            {value: 1, label: "不递补"},
            {value: 2, label: "循环递补"},
        ],
        value:null,
      sexList: [
        //性别
        {id: 1, name: "男"},
        {id: 2, name: "女"},
        {id: 3, name: "未知"},
      ],
      timeList: [
        {id: 1, name: "分钟"},
        {id: 2, name: "秒"},
      ],
      msgTypeList: [
        //有无备注
        {id: 1, name: "有备注"},
        {id: 2, name: "无备注"},
      ],
      pushTimeList: [
        //有无备注
        {id: 1, name: "立即发布"},
        {id: 2, name: "定时发布"},
      ],
      dateRange1: [],
      checked: true,
      typeList: [
        {value: 1, label: "选择具体客户群"},
        {value: 2, label: "按条件选择客户群"},
      ],
      form: {
        basicInfo: {
          taskName: null,//任务名称
          groupInfo: null,//分组信息
          enterpriseInfo: {
            //企微号信息
            ids: [],//选择的人员
            useType: 1,//客户范围
            condition: [{
              qwLabel: null,//企微标签
            }]
          }
        }
      },
      lableOpt: [
        {value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]}
      ],
      budgetTypeList: [
        {
          label: '所有客户',
          value: 0,
        },
        {
          label: '筛选客户',
          value: 1,
        }
      ],//
      wxLabelList: [
        //群查找
        {value: 1, label: "含任意标签"},
        {value: 2, label: "含所有标签"},
        {value: 3, label: "未打标签"},
      ],
      rules: {
        'basicInfo.taskName': [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
        'basicInfo.groupInfo': [
          {required: true, message: '请选择分组', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.ids': [
          {required: true, message: '请选择下发的企微号', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.useType': [
          {required: true, message: '请选择客户范围', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    getSelectUser() {
      //选择客户
      this.showSelectByUser = true;
    },
    getlink() {
      this.showReplyLink = true;
    },
    onEditorBlur() {
    }, // 失去焦点触发事件
    onEditorFocus() {
    }, // 获得焦点触发事件
    onEditorChange() {
    }, // 内容改变触发事件
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    gotoPage() {
      this.$router.push({
        name: 'circleFriendsMgt',
        query: {
          urlActive: 0,
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.other-option {
  height: 30px;
  display: flex;
  align-items: center;
  color: #2d8cf0;
  font-size: 14px;
  margin-left: 15px;
  border-top: 1px solid #eee;
}

.tips {
  display: block;
  background: #fed;
  border-radius: 2px;
  border: 1px solid #ffdbb6;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  width: 1000px;
  margin: 20px auto;
  font-size: 14px;
}

.content-big {
  height: calc(100vh - 150px);
  overflow-y: auto;
  width: 1000px;
  margin: auto;
  overflow-x: hidden;
  margin-top: 15px;
}

.content-main {
  background: #fff;
  padding-bottom: 12px;
  margin-bottom: 12px;

  .content-title {
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 14px 20px;
    margin-bottom: 20px;
  }

  .el-form {
    padding: 0px 40px;

  }

}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    i {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
  }

}

.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #f0f0f0;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}
/* 通过外部CSS设置编辑器大小 */
::v-deep .ql-editor {
  height: 200px;
}

.footer-btn {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.item-big {
  margin-bottom: 10px;
  margin-right: 0px;
  display: flex;
  .select-left {
    width: 132px;
    margin-right:5px;

  }
  .select-right {
    width: 480px !important;
  }
}
.addOrEditCirleFriend {
  position: relative;
  padding-bottom: 50px;
}
.tablist {
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, .65);
  border-bottom: 1px solid #eee;
  padding: 0px 20px;
  margin-bottom: 10px;
  li {
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    &.active{
      color: #3070ff;
      text-shadow: 0 0 .25px currentColor;
      &:after {
        content: '';
        position: absolute;
        bottom:0px;
        height: 1px;
        width: 100%;
        background: #3070ff;
      }
    }
  }
}
.Group-big {
  border: 1px solid #eee;
  padding: 10px;
  width: 640px;
  margin-left: 94px;
  padding-bottom: 50px;
  position: relative;
  margin-bottom: 20px;
  .item-title {
    margin: 16px 0 6px;
    color: rgba(0, 0, 0, .45);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFan

  }
  ::v-deep .el-form-item__content{
    margin-left: 0px !important;
    display: flex;
    align-items: center;
  }
  .seting-big {
    width: 640px;
    display: flex;
    align-items: center;
    height: 46px;
    background: #f5f6f7;
    border-radius: 2px;
    padding: 0 16px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-size: 14px;
    color: rgba(0, 0, 0, .65);
    .el-checkbox {
      margin-right: 10px;

    }
  }
}
.seting {
  display: flex;
  justify-content: space-between;
  background: rgb(247, 247, 247);
  height: 38px;
  margin: 20px 0px 0px;
  padding: 8px;
  row-gap: 0px;
  font-size: 14px;
  .seting-right {
    color: rgb(255, 153, 0);
  }
}
.flex-big {
  display: flex;

}
.group-tips {
  color: rgba(0, 0, 0, 0.45);
}
.sexing {
  color: rgba(0, 0, 0, 0.45);
  ::v-deep .el-switch {
    margin-right: 5px;
  }
}
</style>
